jetpack.future.import("storage.simple");

var server = 'http://rsstodolist.appspot.com/';
var datastore = jetpack.storage.simple;
var descriptionDefaultMessage = "Your description here";

function send(widget, button) {
  var feedName = $("#feed", widget).val();
  if (feedName != '') {

    datastore.feed = { name: feedName }; // Saving feed name

    var url = jetpack.tabs.focused.url;
    var encodedUrl = encodeURIComponent(url);
    var action = button.attr('id');
    var done = button.attr('data-done');
    var doing = button.attr('data-doing');
    var description = $('#description',widget).val();
    var descriptionParam = (description != '' && description != descriptionDefaultMessage) ? '&description=' + encodeURIComponent(description) : '';
    var request = new XMLHttpRequest();
    
    var rssTodoListUrl = server + action + "?name=" + feedName + "&url=" + encodedUrl + descriptionParam;
    console.log(rssTodoListUrl);
    request.open("GET", rssTodoListUrl, true);
    request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            if (request.status == 200) {
                $('#description', widget).val(descriptionDefaultMessage);
                jetpack.notifications.show({title: 'URL '+ done +' to rssdotolist', body: 'URL ['+ url +'] '+ done +' to feed '+feedName});
            } else 
                jetpack.notifications.show({title: 'Error while '+ doing +' URL to rssdotolist', body: 'Problem while '+ doing +' URL [' + url + '] to feed '+feedName});
        }
    };
    request.send(null);
  }
}

jetpack.statusBar.append({
  html: <>
    <style><![CDATA[
      body,input {font-family: sans-serif; font-size: 9pt; background-color: transparent; color: black;}
      input[type=image] { border: 0; }
      input#feed { width: 75px; background-color: #E3E9EF;}
      input#description { width: 150px; background-color: #E3E9EF; }
      input { border: 1px solid grey; }
      a { border-bottom: 1px solid #63ADF5; cursor: pointer; }
    ]]></style>
    <body>
    <input type="text" id="description"/>
    <input type="image" id="add" data-done="added" data-doing="adding" alt="add current url" src='%3D%3D'/>
    <input type="image" id="del" data-done="deleted" data-doing="deleting" alt="delete current url" src='%3D%3D'/>
    to <input type="text" id="feed" value="somename"/>    
    <a id="link"><img alt="go to that feed" src=''/></a>
     </body>
  </>, // Above icons comes from http://famfamfam.com/lab/icons/silk/ - Many thanks :)
  width: 320,
  onReady: function(widget){
     
     $('#description', widget).val(descriptionDefaultMessage);
     
    if (datastore.feed && datastore.feed.name != '')
        $("#feed", widget).val(datastore.feed.name); // Restoring last feed name

    $("#link", widget).click(function(){
         var tab = jetpack.tabs.open(server + '?name=' + $("#feed", widget).val());
         tab.focus();
    });

    $("#add", widget).click(function() { send(widget, $("#add", widget)); });
    $("#del", widget).click(function() { send(widget, $("#del", widget)); });
    $("#description", widget).focus(function() { if ($('#description',widget).val()==descriptionDefaultMessage) $('#description',widget).val('') });
    $("#description", widget).blur(function() { if ($('#description',widget).val()=='') $('#description',widget).val(descriptionDefaultMessage) });
  }
});

